<template>
	<div class="demo-image " :class="{hiddenBlack:openMessage}">
		<img src="@/assets/pngImg/kong.png" alt="" class="iconkong" v-if="allphoto.length == 0">
		<div class="scrollbar size" id="style-2" v-if="allphoto.length != 0">
			<ul class="block fl clearfix" v-for="(images,index) in allphoto" :key="index">
				<div class="text">{{dateCard(images.time)}}</div>
				<div class="pushFont" v-for="(item,index) in images.photoes">
					<el-image :src="item.url" :alt="item.pictureId" :key="item.pictureId" :preview-src-list="item.srcList">
						<div slot="placeholder" class="image-slot">
							<span class="dot">加载中...</span>
						</div>
					</el-image>
					<i class="iconfont iconchenggong3"  @click="choseMany(item.pictureId)" :class="{changeColor:sign(item.pictureId)}"></i>
				</div>
			
				<i class="iconchenggong iconfont" :class="{changeColor:signAll(images.photoes)}" @click="chooseAll(images.photoes)"></i>
			</ul>
		</div>
		
		<transition>
			<div class="footer" :class="{eject:Multiple.length !=0}">
				<span class="fl">已选中：{{Multiple.length}} 张照片</span>
				<ul>
					<li @click="cancelChose"><i class="iconfont iconquxiao"></i><span class="cancel">取消选择</span></li>
					<li @click="recovery"><i class="el-icon-refresh"><span class="">恢复</span></i></li>
					<li @click="deletedes"><i class="el-icon-close"></i><span class="download">永久删除</span></li>

				</ul>
			</div>
		</transition>
	</div>
</template>

<script>
	import bus from '@/bus/bus.js'
	
	export default {
		data() {
			return {
				AblumName:'',
				openMessage:false,
				pictureId: null,
				Multiple: [], //当前选中的照片
				photosArr: [],
				photosort:[],
				allphoto:[],
				deleteBool:true,
				moveToAblum:''
			}
		},
		watch:{
			//进入多选模式
			Multiple(){
				if(this.Multiple.length){
					let iconArr = document.querySelectorAll('.iconchenggong3')
					iconArr.forEach(icon=>{
						icon.style.width = "100%";
						icon.style.height = "100%"
					})
				}else{
					let iconArr = document.querySelectorAll('.iconchenggong3')
					iconArr.forEach(icon=>{
						icon.style.width = "20px";
						icon.style.height = "20px"
					})
				}
			}
		},
		computed:{
			deleteMessage(){
				if(this.AblumName){
					this.deleteBool = true;
					return '移出相册'
				}else{
					this.deleteBool = false;
					return '删除'
				}
			}
		},
		created() {
		},
		activated(){ //keep-alive 创建时钩子
			this.getPhotoes()
		},
		deactivated(){
			this.AblumName = '';
			this.cancelChose()
		},
		mounted() {
			
		},
		methods: {
			dateCard(date){
				let year = date.split('-')[0]
				let month = date.split('-')[1]
				let day = date.split('-')[2]
				return year+'年'+month+'月'+day+'日 '+this.getWeek(date)
			},
			getWeek(dateString) {
			        var dateArray = dateString.split("-");
			        var date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2]);
			        return "星期" + "日一二三四五六".charAt(date.getDay());
			},
			getPhotoes(){
				this.$http.get('/api/recycle').then(res=>{
					let  Ddata = this.$imageClass.DgetimageArr(res.data)
					this.cardingData(Ddata)
				})
			},
			getAblumName(){
				this.$http.get('/api/ablum').then(res => {
					if(res.status == 200){
						this.photosort = res.data
					}
				})
			},
			//梳理格式
			cardingData(imgArr){
					this.allphoto = [] //清空数据
					let timeArr = [];
					let photoe = {};
					imgArr.map(item => {
						let day = item.uploadTime.split('T')[0]
						if (timeArr.indexOf(day) == -1) {
							photoe[day] = []
							timeArr.push(day)
						}
						let obj = {
							url: this.$store.state.baseHttp+item.pictureReducedPath,//reducedImgPath
							bigurl:this.$store.state.baseHttp+item.picturePath,
							pictureId: item.pictureId,
							isShare:item.isShared
						}
						photoe[day].push(obj) 
					})
					for (let k in photoe) {
						let obj = {}
						obj.time = k;
						obj.photoes = [];
						let srcList = [];
						photoe[k].map(item => {
							srcList.push(item.bigurl)
						})
						photoe[k].map(item => {
							let newobj = {};
							newobj.srcList = srcList;
							newobj.url = item.url;
							newobj.pictureId = item.pictureId
							newobj.isShare = item.isShare
							obj.photoes.push(newobj)
						})
						console.log(this.allphoto)
						this.allphoto.push(obj)
					}
			},
			//选择多个图片
			choseMany(pictureId) {
				this.pictureId = pictureId; //找到选中的el-img 对象
				let img = null;
				let imgArr = document.querySelectorAll('.el-image')
				for (let i = 0; i < imgArr.length; i++) {
					if (this.pictureId == imgArr[i].children[0].alt) { //获取子元素img
						img = imgArr[i]
						break;
					}
				}
				if (this.Multiple.indexOf(pictureId) == -1) { //是否被选中
					this.Multiple.push(pictureId) //1.没有被选中
					img.style.opacity = '0.6';
					img.style.transform = 'scale(0.9)';
				} else { //2.被选中
					let index = this.Multiple.indexOf(pictureId)
					this.Multiple.splice(index, 1) //取消选中
					img.style.opacity = 1;
					img.style.transform = 'scale(1)';
				}
			},
			sign(pictureId) { //多选标记
				return this.Multiple.indexOf(pictureId) != -1
			},
			//多选类
			signAll(urlArr) {
				let bool = true;
				urlArr.forEach(item => {
					if (this.Multiple.indexOf(item.pictureId) == -1) {
						bool = false
					}
				})
				return bool
			},
			//选择一个类
			chooseAll(urlArr) {
				console.log(urlArr)
				if (this.signAll(urlArr)) { //判断初始状态
					urlArr.forEach(item => {
						if (this.Multiple.indexOf(item.pictureId) != -1) {
							this.choseMany(item.pictureId)
						}
					})
				} else {
					urlArr.forEach(item => {
						if (this.Multiple.indexOf(item.pictureId) == -1) {
							this.choseMany(item.pictureId)
						}
					})
				}
			},
			//取消选中
			cancelChose() {
				this.allphoto.forEach(photos => {
					let urlArr = photos.photoes
					urlArr.forEach(item => {
						if (this.Multiple.indexOf(item.pictureId) != -1) {
							this.choseMany(item.pictureId)
						}
					})
				})

			},
			// 恢复照片
			recovery(){
				let Cdata = this.$imageClass.Creback(this.Multiple)
				bus.$emit('loading')
				this.$http.patch('/api/recycle',Cdata).then(res=>{
					this.$message({
						type:'success',
						message:'恢复成功!'
					})
					this.getPhotoes()//重新获取数据
					this.cancelChose() //取消选中
				})
			},
			//永久删除
			deleted(){
				let Cdata = this.$imageClass.Cdelted(this.Multiple)
				bus.$emit('loading')
				this.$http.patch('/api/ablum/all/picture',Cdata).then(res=>{
					this.getPhotoes()//重新获取数据
					this.cancelChose() //取消选中
				})
			},
			 deletedes() {
        this.$confirm('此操作将永久删除该图片, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
					this.deleted();
          this.$message({
            type: 'success',
            message: '永久删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
		}
	}
</script>

<style scoped="scoped">
	.iconkong{
		position: absolute;
		display: block;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.AblumName{
		font-size: 20px;
		position: absolute;
		top: 0;
		left: 60px;
		line-height: 50px;
	}
	.size{
		margin-top: 55px;
		min-height: 658px;
		min-width: 99%;
		background-color: #e9eef3;
	}
	.iconfanhui {
		position: absolute;
		left: 0;
		top: 10px;
		font-size: 30px;
		cursor: pointer;
		left: 15px;
	}
	.top{
		position: absolute;
    width: 100%;
    height: 50px;
    background-color: #f1f6fa;
	}
	.iconquxiao1{
		position: absolute;
		top: 10px;
		right: 10px;
		cursor: pointer;
	}
	.iconquxiao1:hover{
		color: #7e8bff;
	}
	.hiddenBlack::before{
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000000;
		z-index: 99;
		opacity: .4;
	}
	.addTo{
		position: absolute;
		left: 37%;
		top: 50%;
		padding: 20px;
		transform: translate(-50%,-50%);
		background-color: #ebebeb;
		border-radius: 10px;
		z-index: 999;
	}
	.addTo ul {
		width: 400px;
		height: 500px;
		overflow: auto;
		padding-top: 40px;
	}

	.addTo img {
		width: 50px;
		height: 50px;
		border: 2px solid #959c9d;
		border-radius: 5px;
		vertical-align: middle;
		line-height: 70px;
	}

	.addTo li {
		height: 70px;
		width: 100%;
		margin-bottom: 10px;
		background-color: #e1e1e1;
		padding-left: 20px;
		box-sizing: border-box;
		box-shadow: -2px 9px 7px -5px #cacaca;
		border-radius: 10px;
		cursor: pointer;
	}

	.addTo span {
		vertical-align: middle;
		margin-left: 22%;
		line-height: 70px;
		color: #5f5f5f;
		font-size: 18px;
	}

	.footer>ul li {
		float: left;
		width: auto;
		line-height: 60px;
		margin-left: 30px;
		color: white;
		font-size: 16px;
		cursor: pointer;
	}

	.footer>ul li:hover {
		color: #4cff58;
	}

	.footer>ul {
		position: absolute;
		right: 150px;
	}

	.footer>ul li span {
		margin-left: 5px;
	}

	/* 选中一类 */
	.block:hover .iconchenggong {
		opacity: 1;
	}

	.iconchenggong {
		font: 30px;
		top: 50px;
	}

	.iconchenggong {
		position: absolute;
		top: 20px;
		right: 30px;
		bottom: calc(50%-15px);
		font-size: 30px;
		color: #8f9385;
		cursor: pointer;
		opacity: 0;
		transition: 0.3s;
	}

	.footer {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #0a85f8;
		z-index: 9;
		height: 0;
		overflow: hidden;
		transition: .5s;
		opacity: 0;
	}

	.footer>span {
		color: white;
		line-height: 60px;
		margin-left: 50px;
		font-size: 20px;
		font-weight: 600;
	}

	.eject {
		height: 60px;
		opacity: 1;
	}

	.pushFont {
		display: inline-block;
		position: relative;
	}

	.el-image {
		overflow: hidden;
		height: 200px;
		max-width: 400px;
		margin-left: 10px;
		margin-bottom: 10px;
		transition: 0.5s;
		box-shadow: 0px 16px 26px -15px #999999;
		opacity: 1;
		z-index: 2;
	}

	/* 图片动画 */

	.block>>>.el-image__inner {
		width: auto !important;
	}

	.demo-image {
		position: relative;
		text-align: left;
		overflow: hidden;
    margin-top: 60px;
		height: calc(100% - 60px);
		width: 100%;
	}

	.text {
		margin-bottom: 20px;
		color: #737373;
	}

	.block {
		position: relative;
		margin-bottom: 40px;
		padding: 10px;
		box-sizing: border-box;
		padding:  40px;
		width: 100%;
	}


	/* 多选图标 */

	.iconchenggong3 {
		cursor: pointer;
		position: absolute;
		display: block;
		width: 10px;
		height: 10px;
		top: 10px;
		left: 20px;
		color: #acacac;
		opacity: 0;
		font-size: 30px;
		z-index: 3;
		transition: 0.5s;
	}

	.pushFont:hover .iconchenggong3 {
		opacity: 1;
	}

	.changeColor {
		color: #13CE66;
		opacity: 1;
	}
</style>
